<template>
  <div id="shelljdc">
    <div v-if="tickinfo.invoiceState && tickinfo.invoiceState !== '0'" class="shuiyin">
      <!-- 失控-1 -->
      <img v-if="tickinfo.invoiceState === '1'" :src="imgSK"/>
      <!-- 作废-2 -->
      <img v-if="tickinfo.invoiceState === '2'" :src="imgZF"/>
      <!-- 红冲-3 -->
      <img v-if="tickinfo.invoiceState === '3'" :src="imgHC"/>
      <!-- 异常-4 -->
      <img v-if="tickinfo.invoiceState === '4'" :src="imgYC"/>
    </div>

    <div class="ewm">
      <div id="qrimg">
        <canvas id="qrimg000"></canvas>
      </div>
    </div>

    <div class="title color1 juzhong">
      <div class="titleTop">机动车销售统一发票</div>
      <div class="hx1"></div>
      <div class="hx2"></div>
      <div class="titleBottom">发 票 联</div>
      <img class="yz" :src="imgZL" />
    </div>


    <div id="titleOther">
      <div id="sj">
        <span class="c1 z1">开票日期：</span>
        <span class="f2 bb1 STZhongsong">{{ tickinfo.invoiceDate }}</span>
      </div>
      <div id="dmhm">
        <div>
          <span class="c1 z1">发票代码：</span>
          <span class="f2 STZhongsong">{{ tickinfo.invoiceCode }}</span>
        </div>
        <div>
          <span class="c1 z1">发票号码：</span>
          <span class="f2 STZhongsong">{{ tickinfo.invoiceNo }}</span>
        </div>
      </div>
    </div>

    <div id="rightBar">
      第一联
      <br />
      <br />发 <br />票 <br />联
      <br />︵ <br />购货单位付款凭证 <br />︶
      <br />︵ <br />手开无效 <br />︶
    </div>

    <div id="bottomBar">
      <div style="width: 290.0px;">销售单位盖章</div>
      <div>开票人：</div>
      <div style="width: 209.44444444444446px;margin-left: 0.07407407407407407px;">{{ tickinfo.drawer }}</div>
      <div>备注:一车一票</div>
    </div>

    <div class="table">
      <div style="height: 59px">
        <span style="width:13.7%; padding-top: 4px;" class="a font">
          <div id="aa">
            机打代码
            <br />机打号码 <br />机器编号
          </div>
        </span>
        <span style="width:36.3%; padding-top: 4px;">
          <div id="aaa">
            {{ tickinfo.invoiceCode }}
            <br />
            {{ tickinfo.invoiceNo }}
            <br />
            {{ tickinfo.machineNo }}
          </div>
        </span>
        <span style="width:8%; line-height: 59px;" class="font">税控码</span>
        <span style="width:41.902%; padding: 20px 4px;" class="font2">{{ tickinfo.taxAuthorityCode }}</span>
      </div>

      <div style="height: 47.36666666666666px;" class="middle" v-if="invoiceKindCode != 14">
        <span style="width:13.7%;width: 13.7%;padding-left: 6.444444444444444px;line-height: ">
          购买方名称及
          <br />身份证号码/ <br />组织机构代码
        </span>
        <span style="width: 44.3%;" class="ab">
          {{ tickinfo.buyerName }}
          <br />
          {{ tickinfo.idNo }}
        </span>
        <span style="width:14.7%;padding-top: 16.11111111111111px;text-align: center;">纳税人识别号</span>
        <span style="width:27.2%;padding-top: 15.888888888888888px;" class="ab">{{ tickinfo.buyerTaxNo }}</span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;letter-spacing: 6.444444444444444px;">车辆类型</span>
        <span style="width:24.3%;">{{ tickinfo.vehicleType }}</span>
        <span style="width:8.5%;">厂牌型号</span>
        <span style="width:28.3%;">{{ tickinfo.bandModel }}</span>
        <span style="width:8%;">产地</span>
        <span style="width:17.05%;">{{ tickinfo.produceArea }}</span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;letter-spacing: 6.444444444444444px;">合格证号</span>
        <span style="width:24.3%;">{{ tickinfo.taxPaymentCertificateNo }}</span>
        <span style="width:12.4%;">进口证明书号</span>
        <span style="width:24.4%;">{{ tickinfo.certificateOfImport }}</span>
        <span style="width:8%;">商检单号</span>
        <span style="width:17.05%;">{{ tickinfo.commodityInspectionNo }}</span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;">发动机号码</span>
        <span style="width:36.7%;">{{ tickinfo.engineNo }}</span>
        <span style="width:24.4%;">车辆识别代号/车架号码</span>
        <span style="width:25.05%;">{{ tickinfo.vehicleIdentificationNo}}</span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;letter-spacing: 6.444444444444444px;">价税合计</span>
        <span style="width:52.1%;">{{ Arabia_To_chinese(tickinfo.totalAmount) }}</span>
        <span style="width:34.05%;">
          <span id="xxsz2">小写</span>
          <span id="xxsz">￥{{ toDecimal2(tickinfo.totalAmount) }}</span>
        </span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;">销货单位名称</span>
        <span style="width:52.1%;">{{ tickinfo.salerName }}</span>
        <span style="width:8%;">电话</span>
        <span style="width:26.05%;">{{ tickinfo.salerPhone }}</span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;">纳税人识别号</span>
        <span style="width:52.1%;">{{ tickinfo.salerTaxNo }}</span>
        <span style="width:8%;">账号</span>
        <span style="width:26.05%;">{{ tickinfo.salerBankAccount }}</span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</span>
        <span style="width:39.1%;">{{ tickinfo.salerAddressMotorVehicle }}</span>
        <span style="width:13%;">开户银行</span>
        <span style="width:34.05%;">{{ tickinfo.salerBankName }}</span>
      </div>

      <div style="height: 35px;" class="cc">
        <span style="width:13.7%;">
          增值税税率
          <br />或征收率
        </span>
        <span style="width:12.1%;padding-top: 8px;" v-if="tickinfo.taxRate">{{ (tickinfo.taxRate&&tickinfo.taxRate!='0%')?tickinfo.taxRate:'*' }}</span>
        <span style="width:12.1%;padding-top: 8px;" v-else></span>
        <span style="width:11%;">
          增值税
          <br />税额
        </span>
        <span style="width:16%;padding-top: 8px;" v-if="tickinfo.taxRate">￥{{ (tickinfo.taxRate&&tickinfo.taxRate!='0%')?(tickinfo.taxAmount?toDecimal2(tickinfo.taxAmount):((tickinfo.taxRate==='免税'||tickinfo.taxRate.indexOf('*')>-1)?'***':'')) : '*' }}</span>
        <span style="width:16%;padding-top: 8px;" v-else></span>
        <span style="width:13%;">
          主管税务
          <br />机关及代码
        </span>
        <span style="width:34.05%;">
          {{tickinfo.taxAuthorityName}}
          <br />
          {{tickinfo.taxAuthorityCode}}
        </span>
      </div>

      <div style="height: 29px;" class="bb">
        <span style="width:13.7%;letter-spacing: 6.444444444444444px;">不含税价</span>
        <span style="width:23.1%;">
          <span id="xxsz3">小写</span>
          ￥{{ toDecimal2(tickinfo.invoiceAmount) }}
        </span>
        <span style="width:12%;">完税凭证号码</span>
        <span style="width:24%;">{{ tickinfo.taxPaymentCertificateNo }}</span>
        <span style="width:5%;">吨位</span>
        <span style="width:5.9%;">{{ tickinfo.tonnage }}</span>
        <span style="width:7.9%;">限乘人数</span>
        <span style="width:8.25%;">{{ tickinfo.limitedPeopleCount }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import QRCode from 'qrcode';
import 'jquery.nicescroll';
import popdata from "./common";
export default {
  mixins: [popdata],
  data() {
    return {
      fplxmc: '', //发票类型名称
      isDzfp: false, //是否为电子发票
      invoiceKindCode: '0'
    };
  },
  props: {
    tickinfo: {},
    imgrootpath: {
      default: ''
    }
  },
  watch: {
    tickinfo: {
      handler: function() {
        this.putData();
      },
      deep: true
    }
  },
  mounted() {
    this.putData(this.ticktype);
  },
  methods: {
    putData: function() {
      this.createQR(); //生成二维码
    },
    createQR: function() {
      var qrInfo = this.QRtextCreate(this, this.tickinfo);
      console.log(qrInfo);

      var qrimg000 = document.getElementById('qrimg000');
      QRCode.toCanvas(qrimg000, qrInfo, {width:62,height:62,margin:0}, function(error) {
        console.log(error);
        if (error) {
          console.error(error);
        } else {
          console.log('QRCode success!');
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
$f1: 'STKaiti';
$f2: 'STZhongsong';
$color1:#904e31;
$color2: #4a5ee5;
#shelljdc {
  font-size: 14px;
  line-height: 20px;
  * { box-sizing: border-box; margin: 0; padding: 0; }
}
#shelljdc #title .a,
#shelljdc #title .d,
.z1 {
  font-family: 'STKaiti';
}
#shelljdc .c1.z1,
#shelljdc .bb1 {
  font-size: 13.822222222222221px;
}
#shelljdc .STZhongsong {
  font-family: 'STZhongsong';
}
#shelljdc * {
  box-sizing: border-box;
  font-family:'STZhongsong';
}
.ewm {
  position: absolute;
  left: 34.47777777777778px;
  top: 30px;
}
.ewm #qrimg {
  display: block;
  height: 62px;
  width: 62px;
  float: left;
  canvas {
    width: 100%;
    height: 100%;
  }
}
.ewm {
  font-size: 12.244444444444444px;
  font-family: 'NSimSun';
  color: $color2;
  display: inline-block;
}
.ewm div:last-child {
  letter-spacing: 1.2888888888888888px;
}

#shelljdc {
  .title {
    position: absolute;
    text-align: center;
    margin-top: 25.13333333333333px;
    color: $color1;
    margin-left: 50%;
    transform: translateX(-50%);
    .juzhong {
      margin-left: 50%;
      transform: translateX(-50%);
    }
    .titleTop {
      font-family: 'STKaiti';
      font-size: 24.488888888888887px;
      letter-spacing: 2.2555555555555555px;
      margin-left: 6.444444444444444px;
      margin-right: 6.444444444444444px;
    }
    .titleBottom {
      font-family: 'STKaiti';
      font-size: 26.01622222222222px;
      margin-top: 8.700000000000001px;
    }
    .hx1 {
      border: 0.6444444444444444px solid $color1;
      margin-top: 16.433333333333334px;
      margin-bottom: 3.222222222222222px;
    }
    .hx2 {
      border: 0.6444444444444444px solid $color1;
      margin-top: 0px;
    }
    .yz {
      position: absolute;
      top: 2.9px;
      transform: translateX(-50%);
      height: 81.19999999999999px;
      z-index: -10;
      opacity: 0.8;
      left: 50%;
    }
  }
}

#shelljdc #sj {
  position: absolute;
  top: 96.66666666666666px;
  left: 30px;
  font-size: 15.144444444444442px;
}
#shelljdc #sj > span:first-child,
#dmhm > div > span:first-child {
  color: $color1;
}
#shelljdc #dmhm {
  position: absolute;
  top: 71.53333333333333px;
  left: 589.0222222222222px;
  font-size: 13.822222222222221px;
}
#shelljdc #dmhm span {
  font-size: 13.822222222222221px;
}
#shelljdc .table {
  position: absolute;
  border-top: 1px solid $color1;
  border-left: 1px solid $color1;
  top: 123.73333333333332px;
  left: 29px;
  width: 790px;
  height: 374px;
  margin-top: 0;
  padding-bottom: 0;
}
#shelljdc .table > div > span {
  display: block;
  border-right: 1px solid $color1;
  border-bottom: 1px solid $color1;
  height: 100%;
  float: left;
}
#shelljdc .table > div > span:nth-child(odd) {
  color: $color1;
  font-family: $f1;
  font-size: 13.855555555555554px;
  text-align: center;
  line-height: 16px;
}
#shelljdc .table > div > span:nth-child(even) {
  color: $color2;
  font-family: 'STZhongsong';
  font-size: 13.855555555555554px;
  line-height: 16px;
}
#shelljdc #aa {
  margin-left: 0;
  text-align: center;
}
#shelljdc #aaa {
  margin-left: 6px;
  letter-spacing: 1px;
  line-height: 16px;
}
#shelljdc .bb > span:nth-child(odd) {
  text-align: center;
  padding-top: 6px;
}
#shelljdc .cc > span:nth-child(odd) {
  text-align: center;
  padding-top: 1px;
}
#shelljdc .cc > span:nth-child(even) {
  font-family: $f2;
  padding-left: 9.666666666666666px;
  padding-top: 0px;
}
#shelljdc #rightBar {
  position: absolute;
  font-family: $f1;
  color: $color1;
  font-size: 13.855555555555554px;
  width: 9.666666666666666px;
  top: 134px;
  left: 824px;
  line-height: 15px;
}
#shelljdc #bottomBar {
  position: absolute;
  top: auto;
  bottom: 16px;
  left: 32.22222222222222px;
}
#shelljdc #bottomBar > div:not(:nth-child(3)) {
  display: inline-block;
  font-family: $f1;
  color: $color1;
  font-size: 13.855555555555554px;
}
#shelljdc #bottomBar > div:nth-child(3) {
  display: inline-block;
  font-family: $f2;
  font-size: 13.855555555555554px;
}
#shelljdc .bb > span:nth-child(even),
.ab {
  padding-left: 9.666666666666666px;
  padding-top: 6px;
}
#shelljdc .ab {
  padding-top: 6.444444444444444px;
}
#shelljdc #xxsz {
  font-family: $f2;
  font-size: 13.855555555555554px;
  color: $color2;
}
#shelljdc #xxsz2 {
  font-size: 13.855555555555554px;
  font-family: $f1;
}
#shelljdc #xxsz3 {
  font-family: $f1;
  color: $color1;
  font-size: 13.855555555555554px;
}
/* 水印 */
.shuiyin {
  width: 100%;
  text-align: center;
  top: 40%;
  left: 43.5px;
  font-size: 130.5px !important;
  letter-spacing: 87px;
  position: absolute;
  opacity: 0.5;
  color: #d55;
}
</style>
